import React, { useEffect } from 'react'
import Scroll from '../../baseUI/scroll'
import { connect } from 'react-redux'
import * as actionTypes from './store/actionCreators'
import Classify from '../../components/main/classify/Classify'
import RotationChart from '../../components/main/RotationChart/RotationChart'
import MenuBar from '../../components/main/MenuBar/MenuBar'
import ImgList from '../../components/main/imgList/ImgList'
// props 接收到 mapStateToProps传来的参数
const Main = (props) => {
    // 状态
    const { maindata } = props
    // action
    const { getMainDataDispatch } = props
    const { classify=[], rotationImg=[], menuBarData={} } = maindata
    // console.log(maindata)
    // console.log(getMainDataDispatch,'++++++')
    useEffect(() => {
        if (!maindata.length) {
            getMainDataDispatch()
        }
    }, [])
    return (
        <div className="main">
        <Scroll
            direction={"vertical"}
            refresh={false}
            >
                <div className="main-padding">
                    <Classify classify={classify} />
                    <RotationChart rotationImg={rotationImg}/>
                    <MenuBar menuBarData={menuBarData}/>
                    <ImgList />
                </div>
        </Scroll>
        </div>
    )
}

// 为这个主页设置参数的地方
const mapStateToProps = (state) => {
    // console.log(state,'------------');
    return {
        maindata: state.main.maindata
    }
}
const mapMainDataDispatch = (dispatch) => {
    return {
        getMainDataDispatch() {
            dispatch(actionTypes.getMainData())
        }
    }
}

export default connect(mapStateToProps, mapMainDataDispatch)(Main)